<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <h2>演示vue2双向绑定原理</h2>
        <input type="text" id="inp">
        <span id="txt"></span>
    </div>
</body>
<script>
    const inp = document.querySelector('#inp')

    const obj = {}

    Object.defineProperty(obj, 'prop', {

        get() {
            return val;
        },

        set(newVal) {
            val = newVal
            document.querySelector('#txt').textContent = val
        }

    })

    //监听输入的输入
    inp.addEventListener('keyup', function(e) {
        obj.prop = e.target.value
    }, false)
</script>

</html>